<template>
	<div class="head pos_r">
		<h1>{{ $api.config().name }}</h1>
		<div class="iotfont pos_a time">{{ biTime }}</div>
		<div class="iconfont pos_a crpr" :class="isFullscreen ? 'iconquanping' : 'iconpingmuquanping'"
			@click="fullscreen"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				biTime: '',
				isFullscreen: false
			};
		},
		methods: {
			getTime() {
				setInterval(() => {
					this.biTime = new Date().format('yyyy-MM-dd hh:mm:ss');
				}, 1000);
			},
			//进入全屏
			enterfullscreen() {
				this.isFullscreen = true;
				let el = document.documentElement;
				let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el
					.msRequestFullscreen;
				if (rfs) {
					// typeof rfs != "undefined" && rfs
					rfs.call(el);
				} else if (typeof window.ActiveXObject !== 'undefined') {
					// for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
					let wscript = new ActiveXObject('WScript.Shell');
					if (wscript != null) {
						wscript.SendKeys('{F11}');
					}
				}
			},
			// 退出全屏
			exitfullscreen() {
				this.isFullscreen = false;
				let el = document;
				let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el
					.webkitExitFullscreen || el.exitFullscreen;
				if (cfs) {
					// typeof cfs != "undefined" && cfs
					cfs.call(el);
				} else if (typeof window.ActiveXObject !== 'undefined') {
					// for IE，这里和fullScreen相同，模拟按下F11键退出全屏
					let wscript = new ActiveXObject('WScript.Shell');
					if (wscript != null) {
						wscript.SendKeys('{F11}');
					}
				}
			},
			fullscreen() {
				if (this.isFullscreen) {
					this.exitfullscreen();
					return;
				}

				this.enterfullscreen();
			}
		},
		mounted() {
			this.getTime();

			// 阻止F11键默认事件，用HTML5全屏API代替
			window.addEventListener('keydown', e => {
				e = e || window.event;
				if (e.keyCode === 122) {
					e.preventDefault();
					this.fullscreen();
				}
			});
		}
	};
</script>

<style>
	.head {
		height: 0.7rem;
		background: url('@/static/bi/head_bg.png') no-repeat center center;
		background-size: 100% 100%;
		position: relative;
		z-index: 100;
		background-color: #020425;
	}

	.head h1 {
		color: #fff;
		text-align: center;
		font-size: 0.3rem;
		line-height: 0.66rem;
	}

	.time {
		left: 20px;
		top: 0.18rem;
		font-size: 0.3rem;
		color: #fff;
	}

	.iconfont {
		right: 20px;
		top: 0.18rem;
		font-size: 0.26rem;
		color: #fff;
		transition: transform 0.3s;
	}

	.iconfont:hover {
		transform: scale(1.16);
	}
</style>
